<template>
  <div class="heatSource">
    <search-form
      ref="header"
      :search-data="ruleForm"
      :search-form="searchData"
      :search-handle="searchHandle"
    ></search-form>

    <base-table
      :tableData="tableData"
      :tableColumn="tableTitle"
      :isPage="false"
      :height="tableHeight"
      :tableOption="tableOption"
      @action="handleButton"
    >
      <template v-slot:label="slotData">
        <span>
          <el-tag
            v-for="tag in slotData.data.row.label"
            :key="tag"
            :type="tag"
            style="margin:0 5px 5px;"
          >
            {{ tag }}
          </el-tag>
        </span>
      </template>
    </base-table>

    <!-- 添加或编辑弹框 -->
    <addOrEidtDialog
      ref="heatDialog"
      v-if="dialogObj.show"
      :Visible="dialogObj.show"
      :type="dialogObj.type"
      :dialogRow="dialogObj.dialogRow"
      @close="dialogObj.show = false"
      @refresh="getHeatSourceData"
    ></addOrEidtDialog>
  </div>
</template>
<script>
import baseTable from "@/components/Table/index.vue";
import { onMounted, reactive, toRefs } from "vue";
import addOrEidtDialog from "./component/addOrEditDialog.vue";
import { getHeatSource, delHeatSource } from "@/api/heatSource";
import { ElMessage, ElMessageBox } from "element-plus";
import searchForm from "@/components/SearchForm/index.vue";
import heightMinxin from "@/utils/tableHeight.mixin";
export default {
  name: "heatSource",
  mixins: [heightMinxin],
  components: { searchForm, baseTable, addOrEidtDialog },
  setup() {
    const state = reactive({
      ruleForm: {
        name: "",
      },
      searchData: [
        {
          type: "Input",
          prop: "name",
          placeholder: "输入名称进行搜索",
        },
      ],
      searchHandle: [
        {
          label: "搜索",
          type: "primary",
          handle: () => {
            getHeatSourceData();
          },
        },
        {
          label: "添加",
          handle: () => {
            handleAdd("add");
          },
        },
      ],
      tableData: [],
      tableTitle: [
        { prop: "name", label: "热源名称" },
        { prop: "code", label: "热源编码" },
        {
          prop: "longitude",
          label: "经度",
        },
        { prop: "latitude", label: "纬度" },
        {
          prop: "label",
          label: "标签",
          columnType: "slot",
          slotName: "label",
        },
        { prop: "remark", label: "备注" },
      ],
      tableOption: {
        label: "操作",
        buttons: [
          { name: "编辑", methods: "edit" },
          { name: "删除", methods: "delete", style: { color: "red" } },
        ],
      },
      dialogObj: {
        show: false,
        type: "add",
        dialogRow: {},
      },
    });

    onMounted(() => {
      getHeatSourceData();
    });
    const getHeatSourceData = async () => {
      const { data: res } = await getHeatSource({
        name: state.ruleForm.name,
      });

      if (res.success) {
        const list = res.data.map((item) => {
          item.label = item.label ? JSON.parse(item.label) : [];
          return item;
        });
        state.tableData = list;
      }
    };

    const handleAdd = (type) => {
      state.dialogObj.show = true;
      state.dialogObj.type = type;
    };

    const handleButton = ({ row, methods, index }) => {
      if (methods == "edit") {
        state.dialogObj.dialogRow = row;
        handleAdd(methods);
      } else {
        handleDelete(row, index);
      }
    };

    const handleDelete = (row, index) => {
      ElMessageBox.confirm(`确定删除该热源名称-${row.name}?`, "提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      })
        .then(() => {
          delHeatSource({ id: row.id }).then((res) => {
            if (res.data.success) {
              state.tableData.splice(index, 1);
              ElMessage.success(res.data.msg);
            }
          });
        })
        .catch(() => {});
    };
    return { ...toRefs(state), handleAdd, handleButton, getHeatSourceData };
  },
};
</script>
<style lang="less"></style>
